<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    color: string
    changeSize: (newSize: string) => void
    size?: string
    btnType?: 'success' | 'danger' | 'warning'
  }>(),
  {
    size: 'mini',
    btnType: 'success',
  },
)
console.log(props.color)

const emit = defineEmits<{
  (e: 'changeColor', color: string): void
  (e: 'changeSize', size: string): void
}>()

const onBtnClick = () => {
  emit('changeColor', '好白呀')
}
</script>

<template>
  <div style="border: 10px solid red; width: 300px; height: 50px">
    子组件--{{ color }}--{{ size }}--{{ btnType }}

    <button @click="onBtnClick">修改颜色</button>
    <button @click="emit('changeSize', 'biger')">修改尺寸-a</button>
    <button @click="changeSize('middle')">修改尺寸-b</button>
  </div>
</template>

<style scoped></style>
